<template>
  <div id="app">
    <!-- 第一次父组件向子组件传递数据(props) -->
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item"><router-link to="goods">商品</router-link></div>
      <div class="tab-item"><router-link to="ratings">评价</router-link></div>
      <div class="tab-item"><router-link to="sellers">商家</router-link></div>
    </div>
    <div class="content">
      <router-view :seller="seller" :ratings="ratings" :goods="goods" @changeGoodName="changeGoodName" v-if="goods"></router-view>
      
      <transition>
        <div class="goodItem" v-show="showGoodItem"  ref="showGoodItem">
          <div class="scrollItem">
            <goodMessage :goods="goods" :itemName="itemName" ></goodMessage>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import vHeader from './components/header'
import goods from './components/goods'
// 引入goods的原因是"/"的时候走的是goods组件, 其他的组件在router当中已经注册过了
import goodMessage from "./components/goodmssage"
import BScroll from "better-scroll";
import axios from 'axios'
import Vue from "vue";
import {mapState} from "vuex"

export default {
  name: 'App',
  data() {
    return {
      seller: {},
      ratings: [],
      goods:[],
      itemName: ""
    }
  },
  components: {
    vHeader,
    goods,
    goodMessage
  },
  computed:{
    ...mapState({
      showGoodItem: state => state.showGoodItem
    })
  },
  methods: {
    changeGoodName(goodName) {
      this.itemName = goodName
    },
    _initScroll() {
      this.scroll = new BScroll(this.$refs.showGoodItem, {
        click: true
      })
    }
  },
  created () {
    axios.get("/good/seller").then(
      res => {
        if(res.data.code === 0) {
          this.seller = res.data.data
        }
      }
    ),
    axios.get('/good/ratings').then(
        res => {
            if(res.data.code === 0) {
                this.ratings = res.data.data;
            }
        }
    ),
    axios.get('/good/goods').then(
        res => {
            if(res.data.code === 0) {
              this.goods = res.data.data;
            }
        }
    ),
    Vue.nextTick(() => {
      this._initScroll();
    })
  },
}
</script>

<style lang="stylus" ref="stylesheet/stylus">
@import "./assets/stylus/index.styl";

#app
  .tab
    display flex
    height 40px
    line-height 40px;
    width 100%
    border-1px (rgba(240, 20, 20, 0.1))
    .tab-item
      flex 1
      text-align center
      font-size 14px
      color rgb(77, 85, 93)
      a
        width 100%
        height 100%
        display block
      a.router-link-exact-active
        color rgb(240, 20, 20) !important
  .goodItem
    position fixed
    width 100%
    height 619px;
    left 0
    right 0
    top 0
    bottom 48px
    background-color #f3f5f7
    overflow hidden
    // display none 
.v-enter {
  transform: translateX(100%);
} 
.v-enter-to {
  transform: translateX(0px);
}
/*组件刚要离开的状态*/
.v-leave {
  transform: translateX(0px);
}
/*离开到哪儿*/
.v-leave-to {
  transform: translateX(100%);
}
/*怎么离开的*/
.v-leave-active {
  transition: all .5s ease-in-out;
}
.v-enter-active {
  transition: all .5s ease-in-out;
}


</style>
